<template>
    <el-dialog :visible.sync="dialogVisible" title="标签配置" width="900px" v-dialogDrag :before-close="handleCloseDialog" :modal="modal">
    <div>
      <el-form ref="tagSettingData" :model="tagSettingData" label-width="80px" size="medium">
        <el-form-item label="标签名称" v-if="!isImage">
          <el-input v-model="tagSettingData.name"></el-input>
        </el-form-item>
        <el-form-item label="标签类型">
          <el-radio-group v-model="tagSettingData.l_TP" @change="handleChangeLTP">
            <el-radio :label="1">时间标签</el-radio>
            <el-radio :label="2">单测点选择</el-radio>
            <el-radio :label="3">多测点选择</el-radio>
            <el-radio :label="4" v-if="isImage">单指标选择</el-radio>
            <el-radio :label="5" v-if="isImage">多指标选择</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="时间格式" v-if="tagSettingData.l_TP == 1">
          <el-select v-model="tagSettingData.DtModeID" placeholder="请选择">
            <el-option label="2024年1月1日" :value="1"></el-option>
            <el-option label="2024/1/1" :value="2"></el-option>
            <el-option label="2024-1-1" :value="3"></el-option>
            <el-option label="二〇二四年一月一日" :value="4"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="显示部分" v-if="tagSettingData.l_TP == 1">
          <el-checkbox-group v-model="tagSettingData.dtPart">
            <el-checkbox :label="1">年</el-checkbox>
            <el-checkbox :label="2">月</el-checkbox>
            <el-checkbox :label="3">日</el-checkbox>
          </el-checkbox-group>
        </el-form-item>

        <div v-if="tagSettingData.l_TP == 2 || tagSettingData.l_TP == 4" class="tagSetWrapper">
          <div class="tagLeft">
            <el-select v-model="selectTreeType" placeholder="请选择" size="small" style="margin-left:10px" @change="handleChangeTreeType" v-if="tagSettingData.l_TP == 2">
              <el-option v-for="(item,index) in treeTypeList" :key="index" :label="item" :value="item"></el-option>
            </el-select>
            <div class="tree">
              <treeMenu :treeData="tagMenu" name="lable" @menuLeftClick="handleChangeCodeId" v-if="tagSettingData.l_TP == 2"/>

              <treeMenu :treeData="tagMenu1" name="indeX_NAME" @menuLeftClick="handleChangeCodeId" v-if="tagSettingData.l_TP == 4"/>
            </div>
          </div>
          <div class="tagRight">
            <div>
              <el-radio-group v-model="tagSettingData.tp" @change="handleChangeTP" v-if="tagSettingData.l_TP == 2">
                <el-radio :label="1">测点信息</el-radio>
                <el-radio :label="2">测点值</el-radio>
              </el-radio-group>

              <el-radio-group v-model="tagSettingData.tp" @change="handleChangeTP" v-if="tagSettingData.l_TP == 4">
                  <el-radio :label="4">指标信息</el-radio>
                  <el-radio :label="5">指标值</el-radio>
              </el-radio-group>
            </div>

            <div v-if="tagSettingData.tp == 1">
              <el-select v-model="tagSettingData.field" placeholder="请选择测点信息" size="small">
                <el-option v-for="(item,index) in pointInfoList" :key="index" :label="item.name" :value="item.field"></el-option>
              </el-select>
            </div>
            <div v-if="tagSettingData.tp == 4">
              <el-select v-model="tagSettingData.field" placeholder="请选择指标信息" size="small">
                <el-option v-for="(item,index) in pointInfoList" :key="index" :label="item.name" :value="item.field"></el-option>
              </el-select>
            </div>


            <div v-if="tagSettingData.tp == 2">
                <el-select v-model="tagSettingData.COMP" placeholder="请选择测点分量" size="small">
                  <el-option v-for="(item,index) in pointCompList" :key="index" :label="item.compName" :value="item.comp"></el-option>
                </el-select>
                <el-select v-model="tagSettingData.ValueTypeID" placeholder="请选择测点分量值" size="small" style="margin-left: 20px;">
                  <el-option v-for="(item,index) in pointCompTypeList" :key="index" :label="item.Name" :value="item.ID"></el-option>
                </el-select>
            </div>

            <div v-if="tagSettingData.tp == 5">
                <el-select v-model="tagSettingData.COMP" placeholder="请选择指标分量" size="small">
                  <el-option v-for="(item,index) in pointCompList" :key="index" :label="item.comP_NAME" :value="item.comp"></el-option>
                </el-select>
                <el-select v-model="tagSettingData.ValueTypeID" placeholder="请选择指标分量值" size="small" style="margin-left: 20px;">
                  <el-option v-for="(item,index) in pointCompTypeList" :key="index" :label="item.Name" :value="item.ID"></el-option>
                </el-select>
            </div>


            <div v-if="tagSettingData.tp == 2 && !isImage">
              <el-radio-group v-model="tagSettingData.DtModeID">
                <el-radio :label="1">按年</el-radio>
                <el-radio :label="2">按月</el-radio>
                <el-radio :label="3">时间段</el-radio>
              </el-radio-group>
            </div>

            <div v-if="tagSettingData.tp == 2 && tagSettingData.DtModeID > 0">
              <el-date-picker
                v-model="tagSettingData.dT1"
                type="year"
                size="medium"
                value-format="yyyy"
                placeholder="选择年" v-show="tagSettingData.DtModeID == 1">
              </el-date-picker>
              <el-date-picker
                v-model="tagSettingData.dT1"
                type="month"
                size="medium"
                value-format="yyyy-MM"
                placeholder="选择月" v-show="tagSettingData.DtModeID == 2">
              </el-date-picker>
              <el-date-picker
                v-model="tagSettingData.dT1"
                type="date"
                size="medium"
                value-format="yyyy-MM-dd"
                placeholder="选择日期" v-show="tagSettingData.DtModeID == 3">
              </el-date-picker> <span v-show="tagSettingData.DtModeID == 3">至</span>  
              <el-date-picker
                v-model="tagSettingData.dT2"
                type="date"
                size="medium"
                value-format="yyyy-MM-dd"
                placeholder="选择日期" v-show="tagSettingData.DtModeID == 3">
              </el-date-picker>
            </div>
          </div>
        </div>

        <div v-if="tagSettingData.l_TP == 3 || tagSettingData.l_TP == 5" class="tagSetWrapper">
          <div class="tagLeft">
            <el-select v-model="selectTreeType" placeholder="请选择" size="small" style="margin-left:10px" @change="handleChangeTreeType" v-if="tagSettingData.l_TP == 3">
              <el-option v-for="(item,index) in treeTypeList" :key="index" :label="item" :value="item"></el-option>
            </el-select>
            <div class="tree">
              <treeMenu :treeData="tagMenu" name="lable" @menuLeftClick="handleChangeCodeId" v-if="tagSettingData.l_TP == 3"/>

              <treeMenu :treeData="tagMenu1" name="indeX_NAME" @menuLeftClick="handleChangeCodeId" v-if="tagSettingData.l_TP == 5"/>
            </div>
          </div>
          <div class="tagRight">
            <div>
              <el-tag  v-for="(tag,index) in tagSettingData.points" :key="tag.CODE_ID"  closable style="margin-right:15px;margin-bottom: 10px" @close="handleRemoveTag(tag,index)">{{tag.pointName}}</el-tag>
            </div>
            <div v-if="tagSettingData.l_TP == 3">
              <el-select v-model="tagSettingData.COMP" placeholder="请选择多测点分量" size="small">
                <el-option v-for="(item,index) in pointCompList" :key="index" :label="item.compName" :value="item.comp"></el-option>
              </el-select>
              <el-select v-model="tagSettingData.ValueTypeID" placeholder="请选择多测点分量值" size="small" style="margin-left: 20px;">
                <el-option v-for="(item,index) in pointCompTypeList" :key="index" :label="item.Name" :value="item.ID"></el-option>
              </el-select>
            </div>

            <div v-if="tagSettingData.l_TP == 5">
              <el-select v-model="tagSettingData.COMP" placeholder="请选择多指标分量" size="small">
                <el-option v-for="(item,index) in pointCompList" :key="index" :label="item.comP_NAME" :value="item.comp"></el-option>
              </el-select>
              <el-select v-model="tagSettingData.ValueTypeID" placeholder="请选择多指标分量值" size="small" style="margin-left: 20px;">
                <el-option v-for="(item,index) in pointCompTypeList" :key="index" :label="item.Name" :value="item.ID"></el-option>
              </el-select>
            </div>

            <div v-if="tagSettingData.tp == 2 && !isImage">
              <el-radio-group v-model="tagSettingData.DtModeID">
                <el-radio :label="1">按年</el-radio>
                <el-radio :label="2">按月</el-radio>
                <el-radio :label="3">时间段</el-radio>
              </el-radio-group>
            </div>
            <div v-if="tagSettingData.tp == 2 && tagSettingData.DtModeID > 0">
              <el-date-picker
                v-model="tagSettingData.dT1"
                type="year"
                value-format="yyyy"
                size="medium"
                placeholder="选择年" v-show="tagSettingData.DtModeID == 1">
              </el-date-picker>
              <el-date-picker
                v-model="tagSettingData.dT1"
                type="month"
                value-format="yyyy-MM"
                size="medium"
                placeholder="选择月" v-show="tagSettingData.DtModeID == 2">
              </el-date-picker>
              <el-date-picker
                v-model="tagSettingData.dT1"
                type="date"
                value-format="yyyy-MM-dd"
                size="medium"
                placeholder="选择日期" v-show="tagSettingData.DtModeID == 3">
              </el-date-picker> <span v-show="tagSettingData.DtModeID == 3">至</span>  
              <el-date-picker
                v-model="tagSettingData.dT2"
                type="date"
                size="medium"
                value-format="yyyy-MM-dd"
                placeholder="选择日期" v-show="tagSettingData.DtModeID == 3">
              </el-date-picker>
            </div>
          </div>
        </div>

        <div class="btnGroup" style="margin-top: 10px">
            <el-button size="small" @click="handleCloseDialog" icon="el-icon-circle-close"> 取消 </el-button>
            <el-button type="primary" size="small" @click="handleSaveEditTag" icon="el-icon-circle-check"> 保存 </el-button>
        </div>
    </el-form>
    </div>
  </el-dialog>
</template>
<script>
import {GetTreeStyle,GetTreeInstr,getPointInfoConfig,getPointComps,getPointCompType,scuRmIndexList,scuRmIndexClassCompList} from '@/api/https'
import treeMenu from '@/components/base/treeMenu.vue'
export default ({
    components:{treeMenu},
    props:{
        visible:{
            type:Boolean,
            default:false
        },
        stationId:{
           type:[String,Number],
            default:''
        },
        tagSettingData:{
            type:Object,
            default:()=>{
                return {}
            }
        },
        isImage:{
          type:Boolean,
          default:false
        },
        modal:{
          Boolean,
          default:true
        }
    },
     watch: {
        visible(newVal) {
            this.dialogVisible = newVal
            if(newVal){
                this.getData()
            }
        },
        dialogVisible(newVal) {
            this.$emit('update:visible', newVal)
        }
    },
    data() {
        return{
            dialogVisible:this.visible,
            codeID:[],
            selectTreeType:'',
            tagMenu:[],
            pointInfoList:[],
            pointCompList:[],
            pointCompTypeList:[],
            treeTypeList:[],
            tagMenu1:[],
            INDEX_CLASS_ID:'',
        }   
    },
    methods:{
        getData(){
            if(this.tagSettingData.l_TP == 2){
                this.handleGetTreeStyle()
                this.codeID = this.tagSettingData.CODE_ID
            if(this.tagSettingData.tp == 1){
                this.handleGetPointInfoConfig()
            }else if(this.tagSettingData.tp == 2){
                this.handlegetPointComps()
                this.handleGetPointCompType()
            }
            }else if(this.tagSettingData.l_TP == 3){
                this.handleGetTreeStyle()
                this.handlegetPointComps()
                this.handleGetPointCompType()
            }
        },
        handleChangeLTP(val){
            if(val == 1){
                this.tagSettingData.tp = 3
                this.codeID = []
            }else if(val == 2){
              this.tagSettingData.tp = 1
              this.handleGetTreeStyle()
            }else if(val == 3){
                this.tagSettingData.tp = 2
                this.handleGetTreeStyle()
            }else if(val == 4){
                this.tagSettingData.tp = 4
                this.getScuRmIndexList()
            }else if(val == 5){
              this.codeID = []
              this.tagSettingData.tp = 6
              this.getScuRmIndexList()
            }
        },
        getScuRmIndexList(){
              scuRmIndexList({
                  STATION_ID:this.stationId,
                  CATALOG:0
              }).then(res=>{
                  if(res.isSuccess && res.data.length > 0 ){
                      this.tagMenu1 = res.data[0].children
                  }else{
                      this.tagMenu1 = []
                  }
              })
          },
        handleGetTreeStyle(){
            GetTreeStyle(this.stationId).then(res=>{
              if(res.isSuccess){
                  this.treeTypeList = res.data ||[]
                  this.selectTreeType = res.data[0]
                  this.handleGetTreeInstr()
              }
            });
        },
        handleGetTreeInstr(){
            GetTreeInstr(this.stationId,this.selectTreeType).then(res=>{
                if(res.isSuccess){
                    this.tagMenu = res.data || []
                }
            })
        },
        handleSaveEditTag(){
            this.$emit('handleSaveEditTag',this.tagSettingData,this.codeID)
        },
        handleCloseDialog(){
            this.$emit('handleCloseDialog')
        },
        handleGetPointInfoConfig(){
            getPointInfoConfig({
                CodeID:this.codeID[0]
                }).then(res=>{
                if(res.isSuccess){
                    this.pointInfoList = res.data.pointInfo || []
                }
            })
        },
        handlegetPointComps(){
            getPointComps({
                CodeID:this.codeID[0]
            }).then(res=>{
                if(res.isSuccess){  
                    this.pointCompList = res.data || []
                }
            })
        },
        handleGetPointCompType(){
            getPointCompType({
                CodeID:this.codeID[0],
                tp:1
            }).then(res=>{
                if(res.isSuccess){
                    this.pointCompTypeList = res.data.valueTypes || []
                }
            })
        },
        handleChangeTreeType(val){
            this.selectTreeType = val
            this.handleGetTreeInstr()
        },
        handleChangeCodeId(data){
            if(this.tagSettingData.l_TP == 2 && this.tagSettingData.tp == 1){
                //单测点(测点信息)
                this.codeID = []
                this.codeID.push(data.codE_ID)
                this.handleGetPointInfoConfig()
            }else if(this.tagSettingData.l_TP == 2 && this.tagSettingData.tp == 2){
                //单测点(测点值)
                this.codeID = []
                this.codeID.push(data.codE_ID)
                this.handlegetPointComps()
                this.handleGetPointCompType()
            }else if(this.tagSettingData.l_TP == 3){
                // 多测点
                this.codeID.push(data.codE_ID)
                this.tagSettingData.points.push({
                    CODE_ID:data.codE_ID,
                    pointName:data.treeName
                })
                this.handlegetPointComps()
                this.handleGetPointCompType()
            }else if(this.tagSettingData.l_TP == 4 && this.tagSettingData.tp == 4){
                    //单测点(测点信息)
                    this.INDEX_CLASS_ID = data.indeX_CLASS_ID
                    this.codeID = []
                    this.codeID.push(data.indeX_ID)
                    this.handleGetPointInfoConfig()
                }else if(this.tagSettingData.l_TP == 4 && this.tagSettingData.tp == 5){
                    //单测点(测点值)
                    this.codeID = []
                    this.codeID.push(data.indeX_ID)
                    this.INDEX_CLASS_ID = data.indeX_CLASS_ID
                    this.getScuRmIndexClassCompList()
                    this.handleGetPointCompType()
                }else if(this.tagSettingData.l_TP == 5){
                    //单测点(测点值)
                    this.codeID.push(data.indeX_ID)
                    this.INDEX_CLASS_ID = data.indeX_CLASS_ID
                    this.tagSettingData.points.push({
                        codE_ID:data.indeX_ID,
                        pointName:data.indeX_NAME
                    })
                    this.getScuRmIndexClassCompList()
                    this.handleGetPointCompType()
                }
        },
        handleChangeTP(val){
            if(val == 1 && this.codeID.length > 0){
              this.handleGetPointInfoConfig()
            }else if(val == 2 && this.codeID.length > 0){
              this.handlegetPointComps()
              this.handleGetPointCompType()
            }else if(val == 4 && this.codeID.length > 0){
                this.handleGetPointInfoConfig()
            }else if(val == 5 && this.codeID.length > 0){
                this.getScuRmIndexClassCompList()
                this.handleGetPointCompType()
            }else if(val == 6 && this.codeID.length > 0){
                this.handlegetPointComps()
                this.handleGetPointCompType()
            }
        },
        handleRemoveTag(data,index){
            this.tagSettingData.points.splice(index,1)
            const codeFilter = this.codeID.findIndex(item =>{return item == data.CODE_ID})
            this.codeID.splice(codeFilter,1)
        },
        getScuRmIndexClassCompList(){
            if(this.INDEX_CLASS_ID){
              scuRmIndexClassCompList({
                  INDEX_CLASS_ID:this.INDEX_CLASS_ID
              }).then(res=>{
                  if(res.isSuccess && res.data.length > 0 ){
                      this.pointCompList =  res.data
                  }else{
                      this.pointCompList = []
                  }
              })
            }
        },
    }
})
</script>
<style scoped lang="scss">
   .tagSetWrapper{
    display: flex;
    flex-direction: row;
    justify-content: start;
    width:800px;
    margin-left:10px;
    .tagLeft{
      width:300px;
      border:1px solid #f0f0f0;
      padding:10px 0px;
      box-sizing: border-box;
      .tree{
        height: 450px;
        overflow: auto;
      }
    }
    .tagRight{
      flex:1;
      border:1px solid #f0f0f0;
      padding:10px;
      margin-left: 20px;
      box-sizing: border-box;
      div{
        margin-top: 10px;
      }
    }
   }
</style>
